<template>
	<view class="point-wrap" :data-theme="themeStyle">
		<view class="zqs-open-head">
			<uni-nav-bar left-icon="left" color="#ffffff" backgroundColor="transparent" :statusBar="!0" :border="!1">
				<block slot="left">
					<image class="left_back" :src="$util.img('upload/uniapp/xxjk/back_white_icon@2x.png')"
						@click="$util.goBack()">
					</image>
				</block>
			</uni-nav-bar>
		</view>
		<mescroll-uni @getData="getData" ref="mescroll" :size="10">
			<block slot="list">
				<view class="head-body"
					:style="{backgroundImage:'url('+$util.img('upload/uniapp/xxjk/exchangeBg_icon@2x.png')+')'}">
					<view class="head_c">
						<view class="head-o-box">
							<view class="left-box">
								<view class="left-t">我的兑换券</view>
								<view class="legt-num">{{memberInfo.account5}}</view>
							</view>
							<view class="right-box" @click="jumpPage('/xxjk/bonus/bonusRecord?mode=cash')">兑换券明细<image
									class="img" :src="$util.img('upload/uniapp/xxjk/exchangeDown@2x.png')"></image>
							</view>
						</view>
						<view class="but-box">
							<view class="but-item frist" @click="jumpPage('/pages/member/index/index')">
								<image class="img" :src="$util.img('upload/uniapp/xxjk/exchange_record_icon@2x.png')">
								</image>
								<view class="but-title">获取兑换券</view>
							</view>
							<view class="but-item" @click="jumpPage('/xxjk/exchange/exchange_record/exchange_record')">
								<image class="img" :src="$util.img('upload/uniapp/xxjk/exchange_icon@2x.png')"></image>
								<view class="but-title">兑换记录</view>
							</view>
						</view>
					</view>
				</view>
				<view class="body-wrap" :class="{ 'no-login': !token }">
					<view class="point-exchange-wrap" v-if="goodsList.length > 0">
						<view class="type-wrap-box">
							<view class="type-wrap">
								<text class="type-name">兑换券换好物</text>
								<view></view>
								<text class="type-sub">积累兑换券，兑换好物</text>
							</view>
							<!-- <text class="more" @click="goGoodsList()">更多</text> -->
						</view>

						<view class="list-wrap">
							<view class="goods-list double-column" v-if="goodsList.length">
								<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index">
									<view class="goods-img" @click="toDetail(item)">
										<image :src="goodsImg(item.goods_image)" mode="widthFix"
											@error="imgError(index)"></image>
									</view>
									<view class="info-wrap">
										<view class="name-wrap">
											<view class="goods-name" @click="toDetail(item)">{{ item.goods_name }}
											</view>
										</view>
										<view class="lineheight-clear">
											<view class="discount-price">
												<text class="unit color-base-text">{{ item.price }}</text>
												<text class="unit color-base-text font-size-tag">兑换券</text>
											</view>
										</view>
										<view class="pro-info">
											<view class="font-size-activity-tag color-tip">库存{{ item.stock }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>
<script>
	import htmlParser from '@/common/js/html-parser';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				mescroll: null,
				goodsList: [],
				token: null,
				memberInfo: {
					headimg: '',
					account5: ''
				}
			};
		},
		mixins: [globalConfig],
		onShow() {
			uni.setNavigationBarTitle({
				title: '兑换券兑换专区'
			})
			if (uni.getStorageSync('token')) this.getMemberInfo();
			if (!uni.getStorageSync('token')) {
				this.$util.redirectTo('/otherpages/login/login/login', {
					back: '/xxjk/exchange/index/index'
				}, 'redirectTo');
			}
		},
		computed: {
			storeToken() {
				return this.$store.state.token;
			}
		},
		watch: {
			storeToken: function(nVal, oVal) {
				if (nVal) {
					this.getMemberInfo();
				}
			}
		},
		methods: {
			jumpPage(url) {
				this.$util.redirectTo(url);
			},
			//获取商品列表
			getData(mescroll) {
				// this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/exchange/api/goods/page',
					data: {
						page_size: mescroll.size,
						page: mescroll.num
					},
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
						this.goodsList = this.goodsList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail() {
						//联网失败的回调
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			//跳转至详情页面
			toDetail(item) {
				this.$util.redirectTo('/xxjk/exchange/detail/detail', {
					id: item.sku_id
				});
			},
			goGoodsList() {
				this.$util.redirectTo('/promotionpages/point/list/goods_list');
			},
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/exchange/api/goods/memberInfo',
					success: res => {
						if (res.code >= 0) {
							this.token = uni.getStorageSync('token');
							this.memberInfo = res.data;
						} else {
							this.token = null;
						}
					}
				});
			},
			imgError(index) {
				this.goodsList[index].image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			},
			goodsImg(imgStr) {
				let imgs = imgStr.split(',');
				return imgs[0] ? this.$util.img(imgs[0], {
					size: 'mid'
				}) : this.$util.getDefaultImage().default_goods_img;
			},
		},
		onShareAppMessage(res) {
			var title = '兑换券兑换，好礼带回家哦';
			var path = '/xxjk/exchange/index/index';
			return {
				title: title,
				path: path,
				success: res => {},
				fail: res => {}
			};
		}
	};
</script>

<style lang="scss">
	.zqs-open-head {
		position: fixed;
		z-index: 9999;
	}

	.left_back {
		width: 48rpx;
		height: 48rpx;
	}

	.head-body {
		width: 100vw;
		height: 550rpx;
		background-size: cover;
		padding: 328rpx 24rpx 0 24rpx;
		box-sizing: border-box;

		.head_c {
			padding: 42rpx 26rpx 0 38rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.head-o-box {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.left-box {
					.left-t {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #777777;
						line-height: 28rpx;
					}

					.legt-num {
						margin-top: 16rpx;
						font-family: Helvetica, Helvetica;
						font-weight: bold;
						font-size: 56rpx;
						color: #222222;
						line-height: 50rpx;
					}
				}

				.right-box {
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
					line-height: 28rpx;

					.img {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.but-box {
				margin-top: 40rpx;
				width: 100%;
				height: 95rpx;
				border-top: 2rpx solid #EEEEEE;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;

				.but-item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50%;

					.img {
						width: 40rpx;
						height: 40rpx;
					}

					.but-title {
						margin-left: 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						line-height: 50rpx;
					}
				}

				.frist {
					border-right: 2rpx solid #EEEEEE;
				}
			}
		}
	}

	/* 说明弹框 */
	.tips-layer {
		background: #fff;
		z-index: 999;
		height: 40%;
		width: 100%;

		.head {
			position: relative;
		}

		.title {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: $font-size-toolbar;
			font-weight: 700;
		}

		text {
			position: absolute;
			top: 8rpx;
			right: 22px;
			font-size: $font-size-toolbar;
			font-weight: 500;
		}

		.body {
			width: 100%;
			height: calc(100% - 80rpx);
			overflow-y: scroll;

			.detail {
				padding: 20rpx;

				.font-size-base {
					margin-bottom: 10rpx;
				}
			}

		}
	}

	.lineheight-clear {
		line-height: 1 !important;
	}

	// 商品列表双列样式
	.goods-list.double-column {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.goods-item {
			flex: 1;
			position: relative;
			background-color: #fff;
			flex-basis: 48%;
			max-width: calc((100% - 30rpx) / 2);
			margin-right: $margin-both;
			margin-bottom: $margin-updown;
			border-radius: $border-radius;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.goods-img {
				position: relative;
				overflow: hidden;
				padding-top: 100%;
				border-top-left-radius: $border-radius;
				border-top-right-radius: $border-radius;

				image {
					width: 100%;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}

			.goods-tag {
				color: #fff;
				line-height: 1;
				padding: 8rpx 16rpx;
				position: absolute;
				border-bottom-right-radius: $border-radius;
				top: 0;
				left: 0;
				font-size: $font-size-goods-tag;
			}

			.goods-tag-img {
				position: absolute;
				border-top-left-radius: $border-radius;
				width: 80rpx;
				height: 80rpx;
				top: 0;
				left: 0;
				z-index: 5;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info-wrap {
				padding: 0 26rpx 26rpx 26rpx;
			}

			.goods-name {
				font-size: $font-size-base;
				line-height: 1.3;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin-top: 20rpx;
				height: 36rpx;
			}

			.discount-price {
				display: inline-block;
				font-weight: bold;
				line-height: 1;
				margin-top: 16rpx;

				.unit {
					margin-right: 6rpx;
				}
			}

			.pro-info {
				display: flex;
				margin-top: 16rpx;

				&>view {
					line-height: 1;
					flex: 1;
					display: flex;
					align-items: center;

					&:nth-child(2) {
						justify-content: flex-end;
					}

					button {
						padding: 0 16rpx;
						line-height: 2;
					}
				}
			}

			.member-price-tag {
				display: inline-block;
				width: 60rpx;
				line-height: 1;
				margin-left: 6rpx;

				image {
					width: 100%;
				}
			}
		}
	}

	.head-wrap {
		width: 100vw;
		line-height: 1;
		position: relative;
		height: 270rpx;

		&>image {
			width: 100%;
		}

		.wrap {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 5;
			top: 0;
			left: 0;
		}

		.member-wrap {
			height: 190rpx;
			padding: 50rpx 30rpx 30rpx 30rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			.headimg {
				width: 100rpx;
				height: 100rpx;
				background: #fff;
				border: 2px solid #fff;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.point {
				margin-left: 30rpx;
				color: #fff;
				font-size: 36rpx;
			}

			.point-name {
				font-size: $font-size-tag;
				color: #FFFFFF;
				margin-left: 4rpx;
				margin-top: 5rpx;
			}

			.iconjifen1 {
				color: #fff;
				margin-left: 8rpx;
			}

			.rule {
				flex: 1;
				text-align: right;
				color: #fff;
			}

			.iconwenhao {
				font-size: 24rpx;
				color: #fff;
				margin-right: 6rpx;
			}

		}

		.action-wrap {
			// margin: 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background-color: rgba(255, 255, 255, .1);

			view {
				line-height: 1;
				text-align: center;
				width: calc((100vw - 1rpx) / 2);
				color: #FFFFFF;

				text {
					font-size: $font-size-tag;
					margin-left: 8rpx;
				}

				// &:first-child {
				// 	margin-right: 30rpx;
				// }

				&.split {
					width: 1rpx;
					height: 50rpx;
					background-color: rgba(238, 238, 238, .3);
					flex-shrink: 0;
				}

				image {
					width: 100%;
				}
			}
		}

		.no-login {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;

			text {
				color: #fff;
			}

			.login-btn {
				display: inline-block;
				height: 70rpx;
				line-height: 70rpx;
				width: 200rpx;
				border: 1px solid #fff;
				border-radius: 70rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.ns-adv {
		margin: $margin-updown $margin-both;
		border-radius: $border-radius;
		overflow: hidden;
		line-height: 1;

		image {
			width: 100%;
		}
	}

	.body-wrap {
		margin-top: 50rpx;

		&.no-login {
			margin-top: 20rpx;
		}

		.point-exchange-wrap {
			padding: 0 30rpx;
			margin-top: 30rpx;
		}

		.type-wrap {
			display: flex;
			align-items: center;

			.type-name {
				font-size: 30rpx;
				color: $color-title;
				line-height: 1;
			}

			>view {
				width: 2rpx;
				height: 23rpx;
				background-color: $color-tip;
				margin: 0 20rpx;
			}

			.type-sub {
				font-size: $font-size-tag;
				color: $color-tip;
				line-height: 1;
			}
		}

		.list-wrap {
			width: 100%;

			.list-wrap-scroll {
				width: 100%;
				flex-direction: row;
				// white-space: nowrap;
				line-height: 1;
			}
		}
	}

	.type-wrap-box {
		margin-top: 70rpx;
		display: flex;
		justify-content: space-between;

		.more {
			color: #ff5251;
			cursor: pointer;
		}
	}
</style>
<style scoped>
	/deep/ .reward-popup .uni-popup__wrapper-box {
		background: none !important;
		max-width: unset !important;
		max-height: unset !important;
	}
</style>